<template>
  <div style="width: 100%; height: 100%" ref="myEchartRef"></div>
</template>

<script setup>
import useEcharts from '@/hooks/echarts'

// props
const props = defineProps({
  echartOptions: {
    type: Object,
    default: () => ({})
  }
})

// echarts 容器实例
const myEchartRef = ref()
// 在 onMounted 组件实例挂载后初始化图表
onMounted(() => {
  const { setOptions } = useEcharts(myEchartRef.value)

  // 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行。
  watchEffect(() => setOptions(props.echartOptions))
})
</script>
